﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="css/reset.source.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        html, body { height: 100%; }
        body { color: White; }
        #bodyDiv { width: 100%; height: 100%; background-color: Gray; }

        /**/
        /* This only works with JavaScript, 
		   if it's not present, don't show loader */
		.no-js #fadeDiv { display: none; }
		.js #fadeDiv { display: block; position: absolute; left: 100px; top: 0; }

    </style>
    <script src="../js/modernizr-2.0.6.min.js" type="text/javascript"></script>
    <script src="../js/jquery-1.4.min.js" type="text/javascript"></script>
    <script src="../js/jquery.blockUI.js" type="text/javascript"></script>
    <script src="../js/jquery.easing.1.3.js" type="text/javascript"></script>
    <script type="text/javascript">

        jQuery(function () {

            var p = $("body");
            var offset = p.offset();
            $("#fadeDiv").css({
                top: offset.top, left: offset.left, width: $("#bodyDiv").width(), height: $("body").height(),
                backgroundColor: "white", opacity: 1, position: "absolute"
            });
            if (jQuery.isReady) {

                console.log("jQuery.isReady");

                $("#fadeDiv").fadeOut(1000);
                $.blockUI({ message: '<h1><img src="imgs/busy.gif" /> Just a moment...</h1>' });
            }
        });


        jQuery(window).load(function () {
            console.log("load");

            setTimeout(function () { $.unblockUI(); }, 1000);

            $("#fadeDiv").animate({
                top: -200
            }, 1500);

        });

        jQuery(document).ready(function () {

            console.log("ready");

            $(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);

            function test() {
                $.ajax({ url: 'demo-loading.htm', cache: false });
            }

            $("#Button1").click(function () { });
            $("#Button2").click(function () {

                $.blockUI({
                    message: $("#showdialog")
                });

            });
            $("#Button3").click(function () {
                $("#form").block({
                    message: 'waiting...'
                });
                setTimeout(function () {
                    $("#form").unblock();
                }, 2000);
            });
            $("#Button4").click(function () {
                $.blockUI({ 
                    message: $('#domMessage'),
                    css: { backgroundColor: '#f00', color: '#fff'}
                });
                //$.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' }); 
                setTimeout(function () { $.unblockUI(); }, 2000);
            });

            $("#btnshowdialog").click(function () {
                $.blockUI({
                    message: '<h1>Remote call in progress...</h1>'
                });
                setTimeout(function () { $.unblockUI(); }, 2000);
            });

        });

    </script>
</head>
<body id="index">
    <div id="bodyDiv">
        hello，My name is peter.
        <br />
        Hello world.
        <br />
        <input id="Button1" type="button" value="button1" />
        <br />
        <input id="Button2" type="button" value="showdialog" />
        <br />
        <input id="Button3" type="button" value="button3" />
        <br />
        <input id="Button4" type="button" value="button4" />
        <br />

        <div id="form" style="width:300px; height:100px;">            
        </div>

    </div>
    <div id="fadeDiv">
    </div>
    <div id="domMessage" style="display: none;">
        <h1>We are processing your request. Please be patient.</h1>
    </div>

    <div id="showdialog" style="display:none; margin:20px;">
        <input id="Text1" type="text" />
        <input id="btnshowdialog" type="button" value="button" />
    </div>

    <img width="100" height="100" src="http://farm6.static.flickr.com/5299/5400751421_55d49b2786_o.jpg">

</body>
</html>
